<template>

  <div class="chat-info">
    <div class="head-info">
        <div class="search-head-info">
            <input placeholder="请输入内容" >
        </div>
        <div class="search-head-title">
           <span> 聊天</span>
        </div>
    </div>
    <div class="chat-body">
      <div class="chat-info-left">
        <div class="char-people">
          <span>我的好友1</span>
        </div>
        <div class="char-people">
          <span>我的好友2</span>
        </div>
      </div>

      <div class="chat-info-right">
        <div class="chat-window">

        </div>
        <div class="chat-window-bottom">
          <div class="text-swap">
            <textarea class="text-textarea" v-model="messageInfo"></textarea>
          </div>
          <div class="operation-button-group">
            <div class="margin-left">

            </div>
            <button @click="send()">发送</button>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
    export default {
        name: "chat",
        data(){
          return{
            messageInfo:"",
            webSocket:null,
            path:"ws://localhost:8082/chat",
          }
        },
        created() {
          this.init();
        },
      methods:{
        init: function () {
          if(typeof(WebSocket) === "undefined"){
            alert("您的浏览器不支持socket")
          }else{
            // 实例化socket
            this.socket = new WebSocket(this.path)
            // 监听socket连接
            this.socket.onopen = this.open
            // 监听socket错误信息
            this.socket.onerror = this.error
            // 监听socket消息
            this.socket.onmessage = this.getMessage
          }
        },
        open: function () {
          console.log("socket连接成功")
        },
        error: function () {
          console.log("连接错误")
        },
        getMessage: function (msg) {
          console.log(msg.data)
        },
        send: function () {
          this.socket.send(this.messageInfo);
          this.messageInfo = "";
        },
        close: function () {
          console.log("socket已经关闭")
        }
      }
    }
</script>

<style scoped>

  .search-head-info input{
    width: 100%;
    height: 87%;
  }
  .search-head-info{
    width: 21%;
  }
  .search-head-title{
    margin: auto;
  }
  .head-info{
    height: 8%;
    width: 100%;
    background-color: cadetblue;
    display: flex;
  }
  .chat-body{
    display: flex;
    justify-content: start;
    height: 100%;
  }
  .chat-info{
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 26%;
    background-color: white;
    height: 50%;
  }
  .char-people{
    cursor: pointer;
    margin-top: 10px;
  }

  .chat-window{
    width: 100%;
    height: 68%;
    border: solid 1px lightgray;
  }

  .chat-info-left{
    flex-grow: 1;
  }
  .chat-info-right{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
  }
  .text-swap{
    width: 100%;
    height: 72%;
  }
  .chat-window-bottom{
    width: 100%;
    height: 24%;
  }
  .text-textarea{
    width: 100%;
    border-bottom: none;
    height: 100%;
  }
  .operation-button-group{
    display: flex;
  }
  .margin-left{
    margin-left: auto;
  }
  .char-people{
    text-align: center;
    cursor: pointer;
    padding: 5px 0px;
  }
  .char-people:hover{
    background-color: #cccccc;

  }
</style>
